<template>
  <div class="other-data-type">
    <WmcCard :title="title">
      <template #optbtn>
        <el-button :link="true" type="primary" @click="openDialog">
          添加
        </el-button>
      </template>
      <el-form ref="dataTypeForm" :model="formData" label-position="left">
        <el-row>
          <el-col
            :span="12"
            v-for="item in formData"
            v-bind:key="item.name"
            class="textarea"
          >
            <div v-if="item.isNew == false">
              <div class="title">{{ item.name }}</div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6 }"
                placeholder="请输入内容"
                v-model="item.content"
              >
              </el-input>
            </div>
            <div v-else>
              <div class="title">
                <span>{{ item.name }}</span>
                <el-button
                  type="primary"
                  plain
                  @click="removeDataType(item)"
                  size="small"
                  >删除</el-button
                >
              </div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6 }"
                placeholder="请输入内容"
                v-model="item.content"
              >
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </WmcCard>

    <page-dialog-form
      :title="`添加${title}`"
      width="420px"
      :dialogVisible="dialogVisible"
      :modelConfig="addOtherDataTypeConfig"
      v-model="newFormItem"
      v-if="dialogVisible"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    ></page-dialog-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import WmcCard from '@/render/base-ui/card'
import PageDialogForm from '@/render/components/page-dialog-form'
import { IOtherDataType } from '../types'
import { addOtherDataTypeConfig } from '../config/add-other-data-type.config'
import { usePageDialogForm } from '@/render/hooks/use-page-dialog-form'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: { WmcCard, PageDialogForm },
  props: {
    title: {
      type: String,
      required: true
    },
    modelValue: {
      type: Array as PropType<IOtherDataType[]>,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const formData = ref(props.modelValue)

    const removeDataType = (dataType: IOtherDataType) => {
      let index = formData.value.indexOf(dataType)
      if (index !== -1) {
        formData.value.splice(index, 1)
      }
    }

    const {
      dialogVisible,
      newFormItem,
      openDialog,
      closeDialog,
      handleConfirm
    } = usePageDialogForm(formData.value)

    watch(
      formData,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )
    return {
      formData,
      newFormItem,
      dialogVisible,
      addOtherDataTypeConfig,
      removeDataType,
      openDialog,
      closeDialog,
      handleConfirm
    }
  }
})
</script>

<style scoped lang="less">
.textarea {
  font-size: 14px;
  color: var(--el-text-color-regular);
  .title {
    padding-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
  }
}
.el-row {
  .el-col + .el-col {
    padding-left: 10px;
  }
}
</style>
